<div ui-view="credentials"></div>
<a class="containerGroups-messageBar-link" href="https://docs.ansible.com/ansible-tower/latest/html/administration/external_execution_envs.html#container-groups" target="_blank" style="color: white">
  <div class="Section-messageBar">
      <i class="Section-messageBar-warning fa fa-warning"></i>
      <span class="Section-messageBar-text">{{:: vm.strings.get('state.TECH_PREVIEW_MESSAGE_BAR') }}</span>
  </div>
</a>
<at-panel>
  <at-panel-heading title="{{:: vm.panelTitle }}">
    <a aria-label="{{:: vm.docs.help_text }}" class="Panel-docsLink" ng-href="{{ vm.docs.url }}" target="_blank" aw-tool-tip="{{:: vm.docs.help_text }}">
      <i class="fa fa-book"></i>
    </a>
  </at-panel-heading>
  <at-tab-group>
      <at-tab state="vm.tab.details">{{:: vm.strings.get('tab.DETAILS') }}</at-tab>
      <at-tab state="vm.tab.jobs">{{:: vm.strings.get('tab.JOBS') }}</at-tab>
  </at-tab-group>
  <at-panel-body>
    <at-form state="vm.form" autocomplete="off">
      <at-input-text col="4" tab="1" state="vm.form.name"></at-input-text>
      <at-input-lookup col="4" tab="3" state="vm.form.credential" id="containter_groups_credential"></at-input-lookup>
      <div class="at-Row-toggle Form-formGroup--fullWidth ">
        <label class="Form-inputLabelContainer" for="vm.form.extraVars.isOpen">
            <span class="Form-inputLabel" translate>
                {{ vm.form.extraVars.toggleLabel }}
            </span>
        </label>
        <div ng-disabled="{{vm.form.extraVars.disabled}}" ng-class="{'ContainerGroups-codeMirror': vm.form.extraVars.isOpen }">
          <at-switch  on-toggle="vm.toggle(instance)" switch-on="vm.form.extraVars.isOpen"
          switch-disabled="vm.switchDisabled"></at-switch>
        </div>
      <at-code-mirror
        ng-disabled="{{vm.form.extraVars.disabled}}"
        ng-if="vm.form.extraVars.isOpen"
        col="4" tab="3"
        ng-class="{'containerGroups-codeMirror-disabled': vm.form.extraVars.disabled}"
        class="Form-formGroup--fullWidth"
        variables="vm.form.extraVars.value"
        label="{{ vm.form.extraVars.label }}"
        name="{{ vm.form.extraVars.name }}"
        tooltip="{{ vm.form.extraVars.tooltip }}"
      >
      </at-code-mirror>
    </div>
      <at-action-group col="12" pos="right">
        <at-form-action type="cancel" to="instanceGroups"></at-form-action>
        <at-form-action type="save"></at-form-action>
      </at-action-group>
    </at-form>
  </at-panel-body>
</at-panel>
